<template>
	<view class="page">
		<!-- 姓名 -->
		<view class="name">
			<view>{{name}}</view>
		</view>
		<!-- 请假类型 -->
		<view class="type">
			<view style="font-weight: 600; margin-right: 20rpx;">请假类型</view>
			<view class="tipText">事假</view>
		</view>
		<!-- 请假课程 -->
		<view class="course">
			<view style="font-weight: 600; margin-right: 20rpx;">请假课程</view>
			<view class="tipText">车尼尔钢琴初级教程 第一节</view>
		</view>
		<!-- 请假时间 -->
		<view style="display: flex; flex-direction: column;">
			<view class="time">
				<view style="font-weight: 600; margin-right: 20rpx;">开始时间</view>
				<view class="tipText">2021.01.11 09:00</view>
			</view>
			<view class="time">
				<view style="font-weight: 600; margin-right: 20rpx;">结束时间</view>
				<view class="tipText">2021.01.11 11:00</view>
			</view>
		</view>
		<!-- 请假理由 -->
		<view class="reason">
			<view style="font-weight: 600; margin-right: 20rpx;">请假理由</view>
			<view class="reason_content">
				<view style="margin: 10rpx;" class="tipText">明天学校班会，没有办法来上课。</view>
			</view>
		</view>
		<!-- 是否通过 -->
		<view class="judge" style="display: flex; flex-direction: row;">
			<button class="judge_btn" @click="judging_false">不通过</button>
			<button class="judge_btn" @click="judging_true">通过</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
			}
		},
		onLoad(item) {
			if(item.info){
				let info = JSON.parse(item.info);
				console.log(info);
				this.name = info.name;
			}

		},
		methods: {
			judging_true: function(){
				uni.navigateTo({
					url: '../commitSuccess/commitSuccess?content=审核通过'
				})
			},
			judging_false: function(){
				uni.navigateTo({
					url: '../commitSuccess/commitSuccess?content=审核不通过'
				})
			}
		}
	}
</script>

<style>
	.page {
		width: 750rpx;
		background-color: #F3F5F7;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		justify-content: center;
		/* color: #999; */
	}
	.tipText{
		color: #555;
	}
	.name {
		width: 750rpx;
		height: fit-content;
		display: flex;
		margin-top: 50rpx;
		margin-bottom: 50rpx;
		font-size: x-large;
		color: #FD973F;
		justify-content: center;
	}
	.type {
		width: 750rpx;
		height: fit-content;
		display: flex;
		flex-direction: row;
		margin-top: 30rpx;
		margin-left: 94rpx;
		margin-bottom: 30rpx;
		font-size: 35rpx;
		color: #222222;
		justify-content: left;
	}
	.course {
		width: 720rpx;
		height: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 30rpx;
		margin-left: 94rpx;
		margin-right: auto;
		margin-bottom: 30rpx;
		font-size: 35rpx;
		color: #222222;
		justify-content: left;
	}
	.time {
		width: 750rpx;
		height: fit-content;
		display: flex;
		flex-direction: row;
		margin-top: 30rpx;
		margin-left: 94rpx;
		margin-bottom: 30rpx;
		font-size: 35rpx;
		color: #222222;
		justify-content: left;
	}
	.judge {
		width: 750rpx;
		height: fit-content;
		display: flex;
		flex-direction: row;
		margin-top: 30rpx;
		margin-bottom: 280rpx;
		font-size: large;
		background-color: #F3F5F7;
		color: #222222;
		justify-content: left;
	}
	.judge_btn {
		background-color: #FD973F;
		color: #fff;
		font-size: 34rpx;
		border-radius: 16rpx;
		width: 200rpx;
		height: 96rpx;
		justify-content: center;
	}
	.reason {
		width: 750rpx;
		height: fit-content;
		display: flex;
		flex-direction: row;
		margin-top: 30rpx;
		margin-left: 94rpx;
		margin-bottom: 30rpx;
		font-size: 35rpx;
		color: #222222;
		justify-content: left;
	}
	.reason_content {
		width: 413rpx;
		height: 214rpx;
		margin-top: 0rpx;
		margin-left: 10rpx;
		margin-right: auto;
		background-color: #FFFFFF;
		border-radius: 32rpx;
	}
</style>
